<style lang="less" scoped>

.sucaiimg_data{
  background: white;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  width: 61vw;
  margin-left: 18.5vw;
  font-size: 0px;
  .sucailist_data{
    min-height: 35vw;
  }
  .sucaititle{
    font-size: 1.1vw;
  }
  .sucai_img{
    cursor:pointer;
    width: 100%;
    height: 8vw;
  }
  .sucai_title{
    width: 100%;
    text-align:center;
    font-size: 0.9vw;
    height: 3vw;
  }
  .fistimg{
    width: 61vw;
  }
  .footimg{
    width: 61vw;
  }
}
</style>
<template>
  <div >
    <MainUser></MainUser>

    <div v-if="size>12" style="height:3.2vw"></div>
    <affix v-if="size>12" style="margin-top:-3.2vw">
      <MainTitle  @sousuo="titleSousuo"></MainTitle>
    </affix>
    <MainTitle v-if="size<=12"  @sousuo="titleSousuo"></MainTitle>
    
    <div class="sucaiimg_data">
      <div  v-for="(item,i) in layoutlistdata"
        v-if="i == 0">
        <el-image
          class="fistimg"
          :src="layoutlistdata[0].thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="margin-top:0.5vw;"></div>
      <div class="sucaititle" v-if="type == 1">外景照片</div>
      <div class="sucaititle" v-if="type == 2">工作照片</div>
      <div class="sucailist_data" v-loading="loading">
        <el-row :gutter="10" >
          <el-col :span="6" v-for="(item,i) in sucaiimglist">
            <el-image 
              class="sucai_img" 
              :src="item.thumb" 
              :preview-src-list="[item.thumb]"
              :fit="'cover'">
            </el-image>
            <div class="sucai_title">{{item.title}}</div>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        background
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev, pager, next,sizes"
        :current-page="pagintion.page"
        :page-sizes="pagesizes"
        :page-size="pagintion.page_size"
        :total="pagintion.total">
      </el-pagination>
      <div
        v-for="(item,i) in layoutlistdata"
        v-if="i > 0">
        <el-image
          class="footimg"
          :src="item.thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="height:3vw;"></div>
    </div>
    
  </div>
</template>
<script>
import MainTitle from '../main_title'
import MainUser from '../main_user'
import { layoutlist } from '@/request/api';
export default {
    data() {
        return {
            type:'',
            title:'',
            sucaiimglist:[],
            pagintion: {
              total: 0,
              page_size:50,
              page: 1,
            },
            loading:false,
            pagesizes: [50,100],
            layoutlistdata:[],
            size:0,
        }
    },
    mounted() {
      this.type = this.$route.query.type;
      this.getlayoutbackground();
      this.getimglist();
    },
    methods: {
        //修改条数
        handleSizeChange(val){
          this.pagintion.page_size = val;
          this.getimglist();
        },
        //翻页
        handleCurrentChange(val) {
            this.pagintion.page = val;
            this.getimglist();
        },
        //获取系列列表数据
        getimglist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          if(this.type == 1){
            param.page_id = 3;
          }else if(this.type == 2){
            param.page_id = 4;
          }else if(this.type == 3){
            param.page_id = 6;
          }
          layoutlist(param).then(res => {
            this.loading = false;
            if(res.ok){
              this.sucaiimglist = res.data.data;
              this.pagintion.total = res.data.total;
              this.size = this.sucaiimglist.length;
            }
          })
        },
        getlayoutbackground(){
          var param = {};
          param.page = 0;
          param.size = 50;
          param.page_id = 5;
          layoutlist(param).then(res => {
            if(res.ok){
              this.layoutlistdata = res.data.data;
            }
          })
        }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
